<template>
  <el-dialog
    v-if="open"
    class="dia-style"
    :title="title"
    :visible.sync="open"
    width="1000px"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form
      ref="form"
      :model="formData"
      label-width="140px"
      label-position="left"
      style="padding: 0 10px"
      @submit.native.prevent
    >
      <!-- 基础信息部分 -->
      <div class="upload-title-box">
        <div class="upload-title">基础信息</div>
        <el-checkbox v-model="showRequired" @change="changeShow">仅展示必填信息 </el-checkbox>
      </div>
      <HkForm
        ref="hkFormRef1"
        :form-labels="basicArr"
        :rules="formRules"
        :data="formData"
        :dict-list="dictList"
        :btn-hidden="true"
        label-width="140"
        label-position="left"
      >
        <template #filter-equipmentOrgId>
          <treeselect
            v-model="formData.equipmentOrgId"
            :options="dictList.orgList"
            :normalizer="normalizer"
            :append-to-body="true"
            style="width: 100%"
            placeholder="请选择责任部门"
            @select="changeOrg"
            noResultsText="无匹配数据" 
          />
        </template>

        <template #filter-equipmentUserId>
          <el-select
            v-model="formData.equipmentUserId"
            filterable
            placeholder="请选择责任人"
            style="width: 100%"
            :clearable="true"
          >
            <el-option v-for="item in userListData" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </template>
        <template #filter-equipmentType>
          <el-cascader
            v-model="formData.equipmentType"
            :options="dictList.secproductList"
            :props="casProps"
            :filterable="true"
          />
        </template>
      </HkForm>

      <!-- 增加表格 -->
      <div>
        <el-collapse v-model="activeNames">
          <el-collapse-item name="6">
            <span slot="title" class="collapse-title">端口及服务列表</span>
            <AddTable ref="add_table" :table-data="formData.portServerList" :table-list="portServerListTable" />
          </el-collapse-item>
          <el-collapse-item name="7">
            <span slot="title" class="collapse-title">业务页面地址列表</span>
            <AddTable
              ref="add_table"
              :table-data="formData.businessAddressList"
              :table-list="businessAddressListTable"
            />
          </el-collapse-item>
          <el-collapse-item name="8">
            <span slot="title" class="collapse-title">管理页面地址列表</span>
            <AddTable ref="add_table" :table-data="formData.manageAddressList" :table-list="manageAddressListTable" />
          </el-collapse-item>
          <el-collapse-item name="9">
            <span slot="title" class="collapse-title">角色及账号列表</span>
            <AddTable ref="add_table" :table-data="formData.accountList" :table-list="accountListTable" />
          </el-collapse-item>
        </el-collapse>
      </div>

      <div>
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <span slot="title" class="collapse-title">重要程度</span>
            <HkForm
              ref="hkFormRef"
              :form-labels="criticalityArr"
              :rules="formRules"
              :data="formData"
              :dict-list="dictList"
              :btn-hidden="true"
              label-width="140"
              label-position="left"
            />
          </el-collapse-item>
          <el-collapse-item name="2">
            <span slot="title" class="collapse-title">定密信息</span>
            <HkForm
              ref="hkFormRef"
              :form-labels="secArr"
              :rules="formRules"
              :data="formData"
              :dict-list="dictList"
              :btn-hidden="true"
              label-width="140"
              label-position="left"
            />
          </el-collapse-item>

          <el-collapse-item name="3">
            <span slot="title" class="collapse-title">资质信息</span>
            <AddTable
              ref="add_table"
              :table-data="formData.qualificationsList"
              :table-list="qualificationsListTable"
              :dict-list="dictList"
            />
          </el-collapse-item>

          <el-collapse-item name="4">
            <span slot="title" class="collapse-title">配置信息</span>
            <HkForm
              ref="hkFormRef"
              :form-labels="configArr"
              :rules="formRules"
              :data="formData"
              :dict-list="dictList"
              :btn-hidden="true"
              label-width="140"
              label-position="left"
            />
          </el-collapse-item>
          <el-collapse-item name="5">
            <span slot="title" class="collapse-title">维保信息</span>
            <HkForm
              ref="hkFormRef"
              :form-labels="maintenanceArr"
              :rules="formRules"
              :data="formData"
              :dict-list="dictList"
              :btn-hidden="true"
              label-width="140"
              label-position="left"
            />
          </el-collapse-item>
          <el-collapse-item title="扩展信息" name="10">
            <span slot="title" class="collapse-title">扩展信息</span>
            <el-row :gutter="20" class="iRow">
              <el-col :span="24">
                <el-form-item label="备注">
                  <el-input v-model="formData.equipmentRemark" type="textarea" maxlength="250" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-form>
    <div v-if="subBtn" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import { addDatas, editDatas, queryById, queryUserList, queryByOrder } from '@/api/assets/secProduct.js'
import { validateIP, validateMAC } from '@/utils/validate'
import AddTable from '@/components/Common/addTable.vue'
import Treeselect from '@riophae/vue-treeselect'

export default {
  components: { HkForm, AddTable, Treeselect },
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    dictList: {
      type: Object,
      default: () => {}
    },
    subBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 对话框是否显示
      open: false,
      // 仅展示必填信息
      showRequired: false,
      // 折叠菜单展示的数据
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
      // 表单数据
      formData: {},
      defaultFormData: {
        // 角色及账号列表
        accountList: [],
        // 业务页面地址列表
        businessAddressList: [],
        // 管理页面地址列表
        manageAddressList: [],
        // 端口及服务列表
        portServerList: [],
        qualificationsList: []
      },
      casProps: { expandTrigger: 'hover', emitPath: false, value: 'id', label: 'name', children: 'children' },
      // 人员信息
      userListData: [],
      // 基础信息
      basicArr: [
        {
          label: '名称',
          field: 'name',
          type: 'input',
          maxlength: 50
        },
        {
          label: '编号',
          field: 'productNo',
          type: 'input',
          maxlength: 50
        },
        {
          label: 'IP地址',
          field: 'equipmentIp',
          type: 'input',
          maxlength: 50
        },
        {
          label: 'MAC地址',
          field: 'equipmentMac',
          type: 'input',
          maxlength: 17,
          attrs: {
            placeholder: '格式00:50:56:C0:00:08'
          }
        },
        {
          label: '类型',
          field: 'equipmentType',
          type: 'slot'
        },
        {
          label: '是否国产化',
          field: 'equipmentLocalized',
          type: 'select',
          list: 'equipmentLocalizedList'
        },
        {
          label: '联网类型',
          field: 'equipmentNetType',
          type: 'select',
          list: 'equipmentSecNetTypeList'
        },
        {
          label: '资质名称',
          field: 'qualifiedName',
          type: 'input',
          list: 'equipmentSecNetTypeList',
          maxlength: 50
        },
        {
          label: '产品形态',
          field: 'productStates',
          type: 'select',
          list: 'productStatesList'
        },

        {
          label: '责任部门',
          field: 'equipmentOrgId',
          type: 'slot'
        },
        {
          label: '责任人',
          field: 'equipmentUserId',
          type: 'slot'
        },

        {
          label: '使用状态',
          field: 'equipmentUseStatus',
          type: 'select',
          list: 'equipmentUseStatusList'
        },
        {
          label: '设备状态',
          field: 'equipmentStatus',
          type: 'select',
          list: 'equipmentStatusList'
        },
        {
          label: '涉密等级',
          field: 'equipmentSecLevel',
          type: 'select',
          list: 'equipmentSecLevelList'
        },
        {
          label: '所在安全域',
          field: 'equipmentDomainId',
          type: 'select',
          list: 'assetsSecDomainAutoList'
        },
        {
          label: '部署服务器',
          field: 'deployServer',
          type: 'select',
          list: 'serverList',
          placeholder: '产品形态为软件时必填',
          attrs: {
            placeholder: '产品形态为软件时必填'
          }
        },
        {
          label: '负载均衡设备',
          field: 'loadBalancing',
          type: 'select',
          list: 'loadBalancingList',

          hidden: false
        },
        {
          label: '存储设备',
          field: 'storageDevice',
          type: 'select',
          list: 'storageDeviceList',
          hidden: false
        },
        {
          label: '中间件',
          field: 'middlewareName',
          type: 'select',
          list: 'middleWareList',
          hidden: false
        },
        {
          label: '数据库',
          field: 'databaseName',
          type: 'select',
          list: 'dataBaseInfoList',
          hidden: false
        }
      ],
      // 重要程度
      criticalityArr: [
        {
          label: '重要程度',
          field: 'equipmentCriticalityLevel',
          type: 'select',
          list: 'equipmentCriticalityLevelList',
          span: 12
        },
        {
          label: '是否重点关注',
          field: 'equipmentFocusLevel',
          type: 'select',
          list: 'equipmentLocalizedList'
        }
      ],
      // 定密信息
      secArr: [
        {
          label: '定密时间',
          field: 'equipmentSecDate',
          type: 'datePicker',
          format: 'yyyy-MM-dd'
        },
        {
          label: '有无密级调整',
          field: 'equipmentSecAdjust',
          type: 'select',
          list: 'equipmentSecLevelAdjustList'
        }
      ],
      // 配置信息
      configArr: [
        {
          label: '厂商',
          field: 'equipmentManufacturer',
          type: 'input',
          maxlength: 30
        },
        {
          label: '品牌',
          field: 'equipmentBrand',
          type: 'input',
          maxlength: 30
        },
        {
          label: '型号/版本',
          field: 'equipmentModel',
          type: 'input',
          maxlength: 30
        },
        {
          label: '配置概述',
          field: 'equipmentConfig',
          type: 'input',
          maxlength: 256
        },
        {
          label: '设备序列号',
          field: 'equipmentSerialNumber',
          type: 'input',
          maxlength: 100
        },
        {
          label: '用途说明',
          field: 'equipmentPurpose',
          type: 'select',
          list: 'secPurposeList'
        },
        {
          label: '存放位置',
          field: 'equipmentDeposit',
          type: 'input',
          maxlength: 200
        }
      ],
      // 维保信息
      maintenanceArr: [
        {
          label: '购置时间',
          field: 'equipmentPurchaseDate',
          type: 'datePicker',
          format: 'yyyy-MM-dd'
        },
        {
          label: '入网时间',
          field: 'equipmentNetworkAccessTime',
          type: 'datePicker',
          format: 'yyyy-MM-dd'
        },
        {
          label: '过保日期',
          field: 'equipmentOverdueTime',
          type: 'datePicker',
          format: 'yyyy-MM-dd'
        },
        {
          label: '维保厂家名称',
          field: 'equipmentMaintenanceName',
          type: 'input',
          maxlength: 50
        },
        {
          label: '维保厂家电话',
          field: 'equipmentMaintenanceTelnum',
          type: 'input',
          maxlength: 50
        },
        {
          label: '维保记录',
          field: 'equipmentMaintenanceRecord',
          type: 'textarea',
          maxlength: 500,
          attrs: {
            rows: '8'
          },
          span: 24
        }
      ],
      // 表单校验
      formRules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        productNo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        equipmentIp: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validateIP, trigger: 'blur' }
        ],
        equipmentMac: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: validateMAC, trigger: 'blur' }
        ],
        qualifiedName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        productStates: [{ required: true, message: '不能为空', trigger: 'blur' }],
        equipmentDomainId: [{ required: true, message: '不能为空', trigger: 'blur' }],

        equipmentType: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentLocalized: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentNetType: [{ required: true, message: '不能为空', trigger: 'change' }],

        equipmentUserId: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentOrgId: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentUseStatus: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentStatus: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentSecLevel: [{ required: true, message: '不能为空', trigger: 'change' }]
      },
      // 端口及服务列表
      portServerListTable: [
        { label: '端口号', param: 'port', maxlength: 200, type: 'input', hidden: true },
        { label: '协议', param: 'protocol', maxlength: 200, type: 'input', hidden: true },
        { label: '应用服务名称', param: 'serverName', maxlength: 200, type: 'input', hidden: true }
      ],
      // 业务页面地址列表
      businessAddressListTable: [
        { label: '页面名称', param: 'address', maxlength: 200, type: 'input', hidden: true },
        { label: 'URL', param: 'url', maxlength: 200, type: 'input', hidden: true }
      ],
      // 管理页面地址列表
      manageAddressListTable: [
        { label: '页面名称', param: 'address', maxlength: 200, type: 'input', hidden: true },
        { label: 'URL', param: 'url', maxlength: 200, type: 'input', hidden: true }
      ],
      // 端口及服务列表
      accountListTable: [
        { label: '角色', param: 'role', type: 'input', hidden: true, maxlength: 30 },
        { label: '账号', param: 'account', type: 'input', hidden: true, maxlength: 30 }
      ],
      // 端口及服务列表
      qualificationsListTable: [
        { label: '资质类型', param: 'qualificationType', type: 'select', list: 'qualificationTypeList', hidden: true },
        { label: '检测证书编号', param: 'qualificationNo', type: 'input', hidden: true, maxlength: 30 },
        { label: '检测证书名称', param: 'qualificationName', type: 'input', hidden: true, maxlength: 30 },
        {
          label: '证书有效截至日期',
          param: 'qualificationExpirydate',
          type: 'datePicker',
          format: 'yyyy-MM-dd',
          hidden: true
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getUserList('')
  },

  mounted() {},
  methods: {
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 是否只展示必填项
    changeShow() {
      if (this.showRequired) {
        this.activeNames = []
      } else {
        this.activeNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
      }
      this.basicArr.forEach((item) => {
        if (typeof item.hidden === 'boolean') {
          item.hidden = this.showRequired
        }
      })
    },
    // 清空表单
    resetFields() {
      this.formData = {}
      this.$refs['form'].resetFields()
      this.$refs['hkFormRef1']?.resetForm('formLabels')
      this.$refs['hkFormRef']?.resetForm('formLabels')
    },
    show(id) {
      this.userListData = []

      this.showRequired = true
      this.changeShow()

      if (id) {
        queryById(id).then((res) => {
          this.formData = res
          this.getUserList(res.equipmentOrgId)
        })
      } else {
        queryByOrder().then((res) => {
          const size = res
          const num = 100000 + size + 1
          this.formData = JSON.parse(JSON.stringify(this.defaultFormData))
          this.$set(this.formData, 'orders', size)
          this.$set(this.formData, 'equipmentNo', num)
        })
      }

      this.open = true
    },
    // 提交事件
    async submitForm() {
      const res = await this.$refs.hkFormRef1.handleFormSubmit('formLabels')
      if (this.title == '添加') {
        addDatas(res).then((res) => {
          this.$message.success('新增成功')
          this.cancel()
          this.$emit('handleAdd')
        })
      } else {
        editDatas(res).then((res) => {
          this.$message.success('修改成功')
          this.cancel()
          this.$emit('handleAdd')
        })
      }
    },
    // 关闭按钮
    cancel() {
      this.formData = {}
      this.open = false
    },
    // 部门change事件
    changeOrg(node) {
      if (this.formData.equipmentUserId) {
        this.formData.equipmentUserId = ''
      }
      this.getUserList(node.id)
    },
    /** 查询列表 */
    getUserList(id) {
      queryUserList(id).then((res) => {
        this.userListData = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-title-box {
  height: 60px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 8%);

  .upload-title {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
  }
}

::v-deep {
  .el-collapse-item {
    border-bottom: 1px solid #e6ebf5;

    .el-collapse-item__wrap {
      border-bottom: none;
    }

    .el-collapse-item__content {
      padding-bottom: 0px;
    }
  }

  .iRow {
    margin: 0 !important;
  }

  .el-dialog__body {
    display: flex;
    flex-direction: column;
  }

  .el-collapse {
    border-top: none;

    .el-collapse-item__header {
      height: 60px;
      font-size: 16px;
      font-weight: 700;
      color: #000000;
      //margin-left: 30px;
      border-bottom: none;
      flex: 1 0 auto;
      order: -1;
    }

    .el-collapse-item__arrow {
      // margin: 10px auto 0 10px;

      //margin-left:-90px;
    }

    .el-collapse-item__content {
      .el-row {
        width: 100%;
      }
    }
  }
}

.collapse-title {
  flex: 1 0 90%;
  order: 1;
}

.el-collapse-item__header {
  flex: 1 0 auto;
  order: -1;
}
</style>
